<template>
	<view class="choose-community">
		<view class="current-location">
			<view class="title">
				当前地点
			</view>
			<view class="content">
				<text>{{currentLocation}}</text>
				<view @click="chooseLocation">
					<image src="../../static/icon/locate.png" />
					<text>重新定位</text>
				</view>
			</view>
			<view class="title">
				附近社区
			</view>
			<view class="person" @click="toCheck" v-for="item in communityList" :data-title="item.title"
				:key="item.address">
				{{item.title}}
			</view>
		</view>
		<map @markertap="onmarkertap" :scale="18" :markers="markers" id="map" :longitude="location.longitude"
			:latitude="location.latitude"></map>
	</view>
</template>

<script>
	import qqmapwx from '@/utils/initQqMapWx.js'
	export default {
		data() {
			return {
				location: {
					longitude: 0,
					latitude: 0
				},
				markers: [{
					id: 1,
					longitude: 0,
					latitude: 0
				}],
				currentLocation: '定位中',
				communityList: []
			};
		},
		onLoad() {
			this.initLocation()

		},
		methods: {
			// toCheck
			toCheck(e) {
				// console.log(e.currentTarget.dataset.title)
				uni.navigateTo({
					url: '/pkg-house/check-house/check-house?title=' + e.currentTarget.dataset.title
				})
			},
			onmarkertap(e) {
				console.log(e)
			},
			// search 附近小区
			searchCommunity() {
				qqmapwx.search({
					location: this.location,
					keyword: '小区住宅',
					success: (res) => {
						console.log(res)
						this.communityList = res.data
						res.data.forEach(item => {
							this.markers.push({
								id: item.id - 0,
								longitude: item.location.lng,
								latitude: item.location.lat,
								width: 20,
								height: 20,
								iconPath: '/static/icon/house.png',
								title: item.title
							})
						})
					}
				})
			},
			// uploadLocation 分装
			uploadLocation(res) {
				this.currentLocation = res.name
				this.location.longitude = res.longitude
				this.location.latitude = res.latitude
				this.markers[0].longitude = res.longitude
				this.markers[0].latitude = res.latitude
			},
			// 重新选择定位
			chooseLocation() {
				uni.chooseLocation({
					...this.location,
					success: (res) => {
						console.log(res)
						if (!res.name) return
						this.currentLocation = res.name
						this.uploadLocation(res)
						this.searchCommunity()
					}
				})
			},
			// 初始化定位
			initLocation() {
				uni.getLocation({
					type: 'gcj02',
					isHighAccuracy: true,
					success: (res) => {
						// console.log(res)
						this.uploadLocation(res)
						// 将坐标解析文本
						this.initLocationText()
						this.searchCommunity()
					},
					fail(err) {
						console.log(err)
					}
				})
			},
			// 将坐标解析文本
			initLocationText() {
				// console.log('坐标解析')
				// console.log(qqmapwx)
				qqmapwx.reverseGeocoder({
					location: this.location,
					success: (res, data) => {
						console.log(res.result)
						this.currentLocation = res.result.address
					}
				})
			}
		}
	}
</script>

<style lang="scss">
	#map {
		width: 750rpx;
		height: 750rpx;
	}

	.person {
		padding: 15rpx 30rpx;
		font-size: 28rpx;
	}

	.choose-community {
		height: 100%;
		background-color: #FAFAFA;

		.current-location {
			.title {
				padding: 0 30rpx;
				line-height: 86rpx;
			}

			.content {
				width: 750rpx;
				height: 102rpx;
				background-color: #fff;
				box-sizing: border-box;
				padding: 0 30rpx;
				display: flex;
				justify-content: space-between;
				align-items: center;

				text {
					font-size: 28rpx;
					color: #333;
				}

				view {
					display: flex;
					align-items: center;

					image {
						width: 30rpx;
						height: 30rpx;
						margin-right: 6rpx;
					}

					text {
						color: #5591AF;
					}
				}
			}
		}
	}
</style>
